<template>
  <BaseCard class="h-full" :showHeadBorder="false">
    <template #header>
      <div class="flex justify-between text-white boder-bottom">
        <img class="h-[54px]" src="@/assets/images/visualization/logo.png" />
        <span class="font-bold text-2xl leading-[2] bg-icon">成都大学科研平台</span>
        <span class="text-base pt-3">2025年12月12日 11时11分11秒</span>
      </div>
    </template>
    <div class="flex-1">
      <div class="flex-5">
        <div class="flex-5-item" v-for="(item, index) in itemData" :key="index">
          <!-- <img v-if="item.icon" class="mr-2" :src="getAssetsFile(`@/assets/images/visualization/${item.icon}`)" /> -->
          <img class="mr-2" :src="getAssetsFile(`../../../assets/images/visualization/${item.icon}`)" />
          <div class="flex flex-col border-left">
            <b>{{ item.num }}</b>
            <span>{{ item.name }}</span>
          </div>
          <div v-if="item.name2 && item.num2" class="flex flex-col">
            <b>{{ item.num2 }}</b>
            <span>{{ item.name2 }}</span>
          </div>
        </div>
      </div>
      <el-row :gutter="15">
        <el-col :span="6">
          <chart :option="option" height="270px" />
        </el-col>

        <el-col :span="12">
          <chart :option="option2" height="270px" />
        </el-col>

        <el-col :span="6">
          <chart :option="option3" height="270px" />
        </el-col>
      </el-row>
    </div>
  </BaseCard>
</template>

<script setup>
import BaseCard from "./BaseCard.vue";
import chart from "@/components/chart/index";
import * as echarts from "echarts";
// import {itemData, getAssetsFile} from "./data.js"
// const setIcon = (item)=>{
//   const url = "@/assets/images/visualization/icon" + item.icon + '.png'
//   return url;
// }
const itemData = ref([])
const getAssetsFile = (url) => {
}
const option = ref({
  title: {
    text: "本年度学院科研经费TOP5",
    subtext: "(按立项经费)",
    left: "center",
    // top:20,
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
    subtextStyle: {
      fontSize: 14,
      color: "#333",
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
    align: "left",
    top: 12,
    itemWidth: 30,
    itemHeight: 10,
    data: ["到账经费", "立项经费"],
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: true,
    left: 30,
    top: 60,
    bottom: 20,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: true, //分割线
    },
    axisLine: {
      show: false, //坐标轴
    },
    axisTick: {
      show: false, //坐标刻度
    },
    data: ["中医院", "附属医院", "基础医学部"],
  },
  yAxis: {
    name: "(万元)",
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: "到账经费",
      type: "bar",
      barWidth: 12,
      barGap: "100%",
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
          [
            { offset: 0, color: "#E26F72" }, // 0% 处的颜色
            { offset: 1, color: "#FE898B" }, // 100% 处的颜色
          ]
        ),
      },
      data: [5, 20, 36],
    },
    {
      name: "立项经费",
      type: "bar",
      barWidth: 12,
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1, // 这四个参数分别表示渐变的起点 (x1, y1) 与终点 (x2, y2)
          [
            { offset: 0, color: "#21AAFF" }, // 0% 处的颜色
            { offset: 1, color: "#4ADEFF" }, // 100% 处的颜色
          ]
        ),
      },
      data: [10, 10, 20],
    },
  ],
});
const option2 = ref({
  title: {
    text: "各类项目立项数量",
    left: "center",
    // top:20,
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    orient: "vertical",
    left: "right",
    align: "left",
    top: 12,
    itemWidth: 30,
    itemHeight: 10,
    data: ["项目类型"],
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: false,
    left: 30,
    top: 60,
    bottom: 20,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  xAxis: {
    splitLine: {
      show: false, //分割线
    },
    axisLine: {
      show: false, //坐标轴
    },
    axisTick: {
      show: false, //坐标刻度
    },
    data: ["纵向项目", "横向项目", "校级项目"],
  },
  yAxis: {
    name: "(项)",
    splitLine: {
      show: true,
    },
  },
  series: [
    {
      name: "项目类型",
      type: "bar",
      barGap: "100%",
      barMaxWidth: 50,
      itemStyle: {
        color: "#6395F9",
      },
      data: [5, 20, 36],
    },
  ],
});
const option3 = ref({
  title: {
    text: "本年度成果统计",
    left: "center",
    textStyle: {
      fontSize: 14,
      color: "#333",
      fontWeight: "normal",
    },
  },
  legend: {
    left: "center",
    bottom: 0,
    icon: "circle",
    textStyle: {
      color: "#6E7079",
    },
  },
  grid: {
    show: false,
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  },
  tooltip: {
    show: true,
  },
  graphic: {
    elements: [
      {
        type: "text",
        left: "center",
        top: "110",
        style: {
          text: "总",
          textAlign: "center",
          fill: "#333",
          fontSize: 14,
        },
      },
      {
        type: "text",
        left: "center",
        top: "130",
        style: {
          text: "200项",
          textAlign: "center",
          fill: "#333",
          fontSize: 20,
        },
      },
    ],
  },
  series: [
    {
      name: "成果类型",
      type: "pie",
      radius: ["40%", "70%"],
      color: ["#FFA84A", "#32D9AC"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        formatter: "{d}%",
      },
      labelLine: {
        show: true,
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
        },
      },
      data: [
        { value: 1048, name: "论文" },
        { value: 500, name: "专利" },
      ],
    },
  ],
});
</script>

<style scoped lang="scss">
@import url("./index.scss");
</style>
